---
title: Custom CacheProvider
---

# Custom CacheProvider

## Style container

You may come across a situation where you want to inject the generated styles
into a different element than the current document head (an iframe perhaps).

By using the CacheProvider from `@emotion/react` and `createCache` from
`@emotion/cache` you can specify the target container element.

```jsx
import { ThemeUIProvider } from 'theme-ui'
import { CacheProvider } from '@emotion/react'
import createCache from '@emotion/cache'

/**
 * @see https://emotion.sh/docs/@emotion/cache
 */
const cache = createCache({
  container: document.getElementById('my-cool-iframe'),
})

const theme = {
  colors: {
    text: 'tomato',
  },
}

export default ({ children }) => {
  return (
    <CacheProvider value={cache}>
      <ThemeUIProvider theme={theme}>{children}</ThemeUIProvider>
    </CacheProvider>
  )
}
```

### With react-frame-component

```jsx
import { ThemeUIProvider } from 'theme-ui'
import { CacheProvider } from '@emotion/react'
import createCache from '@emotion/cache'
import Iframe, { FrameContextConsumer } from 'react-frame-component'

const theme = {
  colors: {
    text: 'tomato',
  },
}

export default ({ children }) => {
  return (
    <Iframe initialContent="IFRAME_CONTENT">
      <FrameContextConsumer>
        {(frameContext) => {
          const cache = createCache({
            container: frameContext.document.head,
          })
          return (
            <CacheProvider value={cache}>
              <ThemeUIProvider theme={theme}>{children}</ThemeUIProvider>
            </CacheProvider>
          )
        }}
      </FrameContextConsumer>
    </Iframe>
  )
}
```
